<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签页（Tab）插件</title>
	<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
	  <script src="script/jquery-1.10.min.js"></script>
	<script src="script/bootstrap-3.3.7.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
	<li class="active"> <!--这里是 默认 激活-->
		<a href="#home" data-toggle="tab"> <!-- href 跳转到 #home id-->
			 菜鸟教程
		</a>
	</li>
	<li><a href="#ios" data-toggle="tab" id='ios_tab'>iOS</a></li>
	<li class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" 
		   data-toggle="dropdown">Java 
			<b class="caret"></b>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">  <!--这里是 home id -->
		<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
	</div>
	<div class="tab-pane fade" id="ios">

		<table id="t" class="table">
			<thead>
				<th></th>
				<th>序号</th>
				<th>任务名称</th>
				<th>任务标签</th>
				<th>创建用户</th>
				<th>统计次数</th>
				<th>应用名称</th>
				<th>创建时间</th>
				<th>修改时间</th>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
		</p>
	</div>
</div>

</body>
<script type="text/javascript">
	var json_data_ex= {"data": [{"name": "\u6d4b\u8bd5\u4efb\u52a1", "tag": "\u6d4b\u8bd5\u4efb\u52a1\u6807\u7b7e", "create_user": "org", "total_run_count": 36, "create_time": "2018-06-04-15:19", "app_name": "\u4e91\u7ba1\u5e73\u53f0\u73af\u5883", "id": 7, "last_run_time": "2018-06-05 10:23"}], "success": true}

    function table_append(dom,data){
    	// console.log(1)
    	    $(dom + ' tbody').empty()

            $.each(data, function(index, obj) { // 通用方法，表格添加数据
        // alert(index +"-"+obj.tagName); index序号,
            $(dom + ' tbody').append("<tr><td> <input type=checkbox data-target="+obj.id+"> </td>\
            	<td>"+index+"</td>\
                   <td data-target=name>"+obj.name+"</td>\
                   <td data-target=tag>"+obj.tag+"</td>\
                   <td data-target=create_user>"+obj.create_user+"</td>\
                   <td data-target=total_run_count>"+obj.total_run_count+"</td>\
                   <td data-target=app_name>"+obj.app_name+"</td>\
                   <td data-target=create_time>"+obj.create_time+"</td>\
                   <td data-target=last_run_time>"+obj.last_run_time+"</td>\
                   </tr>")
            });

    }

    // table_append(("#t"),json_data_ex.data)
	$( "ios_tab" ).on( "click", table_append("#t",json_data_ex.data) );

</script>

</html>